<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Portfolio layout example - UIkit documentation</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link rel="stylesheet" href="css/uikit.docs.min.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">

            <nav class="uk-navbar uk-margin-large-bottom">
                <a class="uk-navbar-brand uk-hidden-small" href="layouts_frontpage.html">Brand</a>
                <ul class="uk-navbar-nav uk-hidden-small">
                    <li>
                        <a href="layouts_frontpage.html">Frontpage</a>
                    </li>
                    <li class="uk-active">
                        <a href="layouts_portfolio.html">Portfolio</a>
                    </li>
                    <li>
                        <a href="layouts_blog.html">Blog</a>
                    </li>
                    <li>
                        <a href="layouts_documentation.html">Documentation</a>
                    </li>
                    <li>
                        <a href="layouts_contact.html">Contact</a>
                    </li>
                    <li>
                        <a href="layouts_login.html">Login</a>
                    </li>
                </ul>
                <a href="#offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
                <div class="uk-navbar-brand uk-navbar-center uk-visible-small">Brand</div>
            </nav>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h1 class="uk-heading-large">Portfolio</h1>
                    <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</p>
                </div>
            </div>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">

                    <ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#switcher-content'}">
                        <li class="uk-active"><a href="#">All</a></li>
                        <li><a href="#">Logo</a></li>
                        <li><a href="#">Web</a></li>
                        <li><a href="#">App</a></li>
                    </ul>

                    <ul id="switcher-content" class="uk-switcher">

                        <li class="uk-active">
                            <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-1'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-1" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-2'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-2" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-3'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-3" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                             </div>

                             <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-4'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-4" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-5'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-5" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-6'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-6" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                             </div>

                             <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-7'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-7" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-8'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-8" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-9'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-9" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                             </div>
                        </li>

                        <li>
                            <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-10'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-10" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-11'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-11" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-12'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-12" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-13'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-13" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-14'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-14" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-15'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-15" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-16'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-16" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-17'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-17" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-18'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-18" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                             </div>

                             <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-19'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-19" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-20'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-20" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                             </div>
                        </li>

                        <li>
                            <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-21'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-21" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-thumbnail uk-overlay-hover" data-uk-modal="{target:'#modal-22'}" >
                                        <figure class="uk-overlay">
                                            <img width="600" height="400" src="" alt="">
                                            <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></figcaption>
                                            <a class="uk-position-cover" href="#"></a>
                                        </figure>
                                    </div>
                                    <div id="modal-22" class="uk-modal">
                                        <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                            <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                            <img width="600" height="400" src="" alt="">
                                        </div>
                                    </div>
                                </div>
                             </div>
                        </li>

                    </ul>

                </div>
            </div>

        </div>

        <div id="offcanvas" class="uk-offcanvas">
            <div class="uk-offcanvas-bar">
                <ul class="uk-nav uk-nav-offcanvas">
                    <li>
                        <a href="layouts_frontpage.html">Frontpage</a>
                    </li>
                    <li class="uk-active">
                        <a href="layouts_portfolio.html">Portfolio</a>
                    </li>
                    <li>
                        <a href="layouts_blog.html">Blog</a>
                    </li>
                    <li>
                        <a href="layouts_documentation.html">Documentation</a>
                    </li>
                    <li>
                        <a href="layouts_contact.html">Contact</a>
                    </li>
                    <li>
                        <a href="layouts_login.html">Login</a>
                    </li>
                </ul>
            </div>
        </div>

    </body>
</html>